<template>
  <div id="tabbar">
    <router-link
      v-for="(item, index) in tabbar_list"
      :key="index"
      class="link"
      :to="item.url"
    >
      <img
        @click="fn(index)"
        class="t_icon"
        :src="active == index ? item.nav_img_checked : item.nav_img"
        alt=""
      />
      <span :class="{ t_span: true, active: active == index }">{{
        item.name
      }}</span>
    </router-link>
  </div>
</template>

<script>
import { tabbar } from "@/http/api";
export default {
  name: "tabar",
  data() {
    return {
      tabbar_list: [],
      active: 1,
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  async created() {
    let {
      data: {
        data: { index },
      },
    } = await tabbar();
    console.log(index);
    let list = ["/index", "/course", "/news", "/book", "/person"];
    index.forEach((element, key) => {
      element.url = list[key];
    });
    console.log(index);
    this.tabbar_list = index;
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    fn(index) {
      this.active = index;
      console.log(index);
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
#tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 50px;
  /* background: red; */
  display: flex;
}
#tabbar .link {
  flex: 1;
  border: 1px solid gray;
}
.t_icon {
  width: 50%;
  height: 50%;
}
.t_span {
  display: block;
}
.router-link-active {
}
.active {
  color: red;
}
</style>